<script setup lang='ts'>
import { ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import {
    addPsychometricSet, deletePsychometricSet, getPsychometricSet,
    getSetList, modifyPsychometricSet,
} from '@/api/interface/reuqest';
import { useRoute } from 'vue-router';

let tableList = ref([]);
const route = useRoute();
let params = ref({
    assessmentId:route.query.id,
    pageSize:10,
    pageNum:1,
});
//渲染页面
function getList(){
    getSetList(params.value).then((res)=>{
        console.log(res);
        if (res.code === 200) {
            tableList.value =  res.rows.map((item)=>{
                return  {
                    id:item.id,
                    analysis:item.analysis,
                    highest:item.highest,
                    lowest:item.lowest,
                    range:item.lowest +'-'+item.highest
                }
            })
        }
    });
}
getList();

//添加
let addVisible = ref(false);
const addForm = ref({
    assessmentId:route.query.id,
    analysis:'',
    highest:'',
    lowest:'',
})
const addFormRef = ref<FormInstance>()
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(addForm.value);
            addPsychometricSet(addForm.value).then((res:any)=>{
                if(res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "添加成功",
                    });
                    formEl.resetFields();
                    addVisible.value = false;
                    getList();

                }
            })

            console.log(addForm.value);
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 编辑
const editVisible = ref(false);
const editForm = ref({
    id:'',
    analysis:'',
    highest:'',
    lowest:'',
});

const editFormRef = ref<FormInstance>();
const editTitle = (data:any)=>{
    editVisible.value = true;

    getPsychometricSet(data.id).then((res)=>{
        if (res.code === 200) {
            editForm.value = res.data;
        }
    })
}
const submitEditForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {

            modifyPsychometricSet(editForm.value).then((res)=>{
                if(res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: "修改成功",
                    });
                    editVisible.value = false;
                    getList();
                }

            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 删除
const delTitle =(data)=>{
    deletePsychometricSet(data.id).then((res)=>{
        if(res.code === 200) {
            ElMessage({
                type: 'success',
                message: "删除成功",
            });
            getList()
        }
    })
}
</script>

<template>
    <div class="box">
        <!--        主体-->
        <div style="position: relative">
            <el-form-item>
                <el-button type='primary' @click="addVisible = true">
                    添加
                </el-button>
            </el-form-item>
            <el-table :data="tableList" style="width: 100%;" border>
                <el-table-column prop="analysis" label="提示内容"  align="left"/>
                <el-table-column prop="range" label="分数范围"  align="center"/>
                <el-table-column prop="operation" label="操作"  align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editTitle(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="primary" size="small" @click="delTitle(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--        添加模态框-->
        <el-dialog
            v-model="addVisible"
            title="添加"
            width="600"
        >

            <el-form :model="addForm" style="width:100%" ref="addFormRef" label-position='top'>
                <el-form-item label="分数范围" class='score-box' prop='highest'>
                    <el-form-item  class='score-box' prop='lowest'>
                        <el-input  v-model="addForm.lowest" placeholder='分数'/>
                    </el-form-item>
                    <span>~</span>
                    <el-form-item  class='score-box' prop='highest'>
                        <el-input v-model="addForm.highest" placeholder='分数'/>
                    </el-form-item>
                </el-form-item>

                <el-form-item label="内容信息" prop='analysis'>
                    <el-input v-model="addForm.analysis" type="textarea" maxlength="500" autocomplete="off"
                              resize='none' show-word-limit :rows='9'/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style='text-align: center'>
                    <el-button @click="addVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(addFormRef)">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--        编辑模态框-->
        <el-dialog
            v-model="editVisible"
            title="编辑"
            width="600"
        >
            <el-form :model="editForm" label-width="auto" style="width:100%" ref="editFormRef">
                <el-form-item label="分数范围" class='score-box'>
                    <el-input v-model="editForm.lowest" placeholder='分数'/>
                    <span>~</span>
                    <el-input v-model="editForm.highest" placeholder='分数'/>
                </el-form-item>

                <el-form-item label="内容信息">
                    <el-input v-model="editForm.analysis" type="textarea" maxlength="500" autocomplete="off"
                              resize='none' show-word-limit :rows='9'/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style='text-align: center'>
                    <el-button @click="editVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEditForm(editFormRef)">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang='scss'>
.box {
    margin-bottom: 30px;
    padding: 30px;
}
.page {
    position: absolute;
    bottom: -50px;
    right: 10px;
}
.demo-form-inline {
    height: 50px;
}
::v-deep(.el-form-item__label) {
    font-weight: bold;
}
::v-deep(.score-box .el-input){
    width: 120px !important;
}
.score-box {
    span {
        margin: 0 10px;
    }
}
::v-deep(.el-dialog__header){
    position: relative;
    background-color: #1892FF;
    .el-dialog__headerbtn{
        height: 54px;
        position: absolute;
        top:0px;
        right: -16px;
        background-color: #1892FF;
        svg{
            color: white;
        }
    }
    span{
        color: #FFFFFF;
    }
}
::v-deep(.el-dialog__body) {
    padding: 15px 35px;
}
</style>
